<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-tabs
            v-model="tabActive"
            @tab-click="handleTabClick"
          >
            <el-tab-pane
              v-for="item in tabList"
              :key="item.name"
              :label="item.label"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
          <!--搜索-->
          <SearchForm
            ref="SearchForm"
            style="margin-top: 10px"
            :search-form-arr="searchFormArr"
            @searchParma="searchParma"
          />
        </div>
      </div>
      <!--数据信息-->
      <Panel1
        v-if="tabActive === '0'"
        ref="Panel0"
        :search-params="searchParams"
        @assign-click="handleAssignClick"
      />
      <Panel2
        v-if="tabActive === '1'"
        ref="Panel1"
        :search-params="searchParams"
        @assign-click="handleAssignClick"
      />
      <Panel3
        v-if="tabActive === '2'"
        ref="Panel2"
        :search-params="searchParams"
        @assign-click="handleAssignClick"
      />
    </div>
    <!-- 使用分配弹窗组件 -->
    <AssignDialog
      ref="assignDialog"
      :kh-ids="selectedKhIds"
      @assign-success="handleAssignSuccess"
    />
  </div>
</template>

<script>
import Panel1 from './components/Panel1'
import Panel2 from './components/Panel2'
import Panel3 from './components/Panel3'
import AssignDialog from './components/AssignDialog'

export default {
  name: 'ClueFollow',
  components: { Panel1, Panel2, Panel3, AssignDialog },
  data() {
    return {
      tabActive: '0',
      tabList: [
        { name: '0', label: '分配尚未跟踪客户' },
        { name: '1', label: '分配跟踪池客户' },
        { name: '2', label: '分配踢出池客户' }
      ],
      searchFormArr: [
        {
          fieldName: '公司名称:',
          type: 'input',
          field: 'ComName',
          placeholder: '请输入公司名称'
        },
        {
          fieldName: '联系电话:',
          type: 'input',
          field: 'LinkPhone',
          placeholder: '请输入联系电话'
        }
      ],
      searchParams: {
        ComName: '',
        LinkPhone: ''
      },
      currentUserId: localStorage.getItem('feijiu_user_uid') || '',
      selectedKhIds: ''
    }
  },
  activated() {},
  mounted() {},
  destroyed() {},
  methods: {
    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (e[item.field]) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      this.pageNumber = 1
      this.$refs[`Panel${this.tabActive}`].getDataList('init')
    },
    handleTabClick() {},
    // 处理分配点击事件
    handleAssignClick(selectedRows) {
      const khIds = selectedRows.map((row) => row.khid).join(',')
      this.selectedKhIds = khIds
      this.$refs.assignDialog.openDialog()
    },
    // 处理分配成功事件
    handleAssignSuccess() {
      // 分配成功后可添加刷新列表等操作
      this.$refs[`Panel${this.tabActive}`].getDataList('init')
    }
  }
}
</script>
<style lang="scss" scoped></style>
